<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							新增地址
						</view>
						<view class="app-header-right"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="page-wrap">
				<view class="address-manager">
					<view class="address-manager-edit">
						<view class="ui-list">
							<view class="ui-list-item">
								<view class="label">
									收货人：
								</view>
								<view class="ui-input">
									<input type="text" v-model="addressData.consignee" placeholder="真实姓名"
										maxlength="15">
								</view>
							</view>
							<view class="ui-list-item">
								<view class="label">
									手机号码：
								</view>
								<view class="ui-input">
									<input type="tel" v-model="addressData.tel" placeholder="手机号" maxlength="11">
								</view>
							</view>
							<view class="ui-list-item">
								<view class="label">
									所在地区：
								</view>
								<view class="ui-input">
									<input type="text" readonly="readonly" @click="toAddressView" v-model="city"
										placeholder="省 市 区 街道信息" maxlength="20">
								</view>
							</view>
							<view class="ui-list-item">
								<view class="label">
									详细地址：
								</view>
								<view class="ui-input">
									<input type="text" v-model="addressData.address" placeholder="详细地址" maxlength="40">
								</view>
							</view>
							<view class="ui-list-item ui-box el-flex">
								<view class="label">
									设置为默认地址
								</view>
								<view class="box">
									<checkbox :checked="addressData.is_default"
										@click='addressData.is_default=!addressData.is_default' />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="add maxW" @click="saveAddress">
				<view class="btn btn-gradient el-flex">
					保存地址
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressData: {
					address: "",
					area: "",
					area_id: "",
					city: "",
					city_id: "",
					consignee: "",
					district: "",
					district_id: "",
					is_default: false,
					province: "",
					province_id: "",
					tel: "",
				}
			};
		},
		computed: {
			city() {
				if (!this.addressData.province) return '';
				return this.addressData.province + ' ' + this.addressData.city + ' ' + this.addressData.district + ' ' +
					this.addressData.area;
			}
		},
		methods: {
			showModal(content) {
				uni.showModal({
					title: '提示',
					content: content,
					showCancel: false
				})
			},
			checkPhone(value) {
				const phoneReg = /^1[3456789]\d{9}$$/;
				if (!value) {
					return false;
				}
				if (!Number.isInteger(+value)) {
					return false;
				} else {
					value = value.toString()
					if (phoneReg.test(value)) {
						return true;
					} else {
						return false;
					}
				}
			},
			saveAddress() {
				!this.addressData.consignee ? this.showModal('请输入收货人姓名') : this.addressData.consignee.length < 2 || this
					.addressData.consignee
					.length > 15 ? this.showModal('抱歉，收货人姓名不能多于15个字  最少2个') : !this.addressData.tel ? this.showModal(
						'请输入11位手机号码') : !this.checkPhone(this.addressData.tel) ? this.showModal('请输入11位手机号码') : !this
					.addressData.province ? this.showModal('请选择省份') : !this.addressData.address ? this.showModal(
						'请输入详细地址') : this.addressData.address.length < 5 || this.addressData.address.length > 120 ? this
					.showModal('抱歉，详细地址不能少于5个字，不能多于120个字') : ''
				let address_item = uni.getStorageSync('checkout_address')
				let list = []
				if (!address_item || address_item.length === 0) {
					let obj = this.addressData
					obj.is_default = true
					list.push(obj)
				} else {
					if (this.addressData.is_default) {
						address_item.forEach(item => {
							item.is_default = false
						})
					}
					list = address_item
					list.push(this.addressData)
				}
				uni.setStorage({
					key: 'checkout_address',
					data: list,
					success() {
						uni.navigateBack({
							delta:1,
							success() {
								uni.$emit('addSuccess')
							}
						})
					}
				});
			},
			Back() {
				uni.navigateBack(-1)
			},
			toAddressView() {
				uni.navigateTo({
					url: '/subPage/AddressSearch/AddressSearch'
				})
			}
		},
		onShow() {
			uni.$on('setPosition', (flag) => {
				if (flag) {
					let data = this.$store.state.localData || {}
					this.addressData.province = data.data.province
					this.addressData.city = data.data.city
					this.addressData.district = data.data.district
					this.addressData.area = data.data.area
					this.addressData.province_id = data.province_id
					this.addressData.city_id = data.city_id
					this.addressData.district_id = data.district_id
					this.addressData.area_id = data.area_id
					this.addressData.address = data.name
				}
			})
		},
		onUnload() {
			uni.$off('setPosition')
		},
	}
</script>

<style lang="scss" scoped>
	.header {
		height: .96rem;
		background-color: rgb(242, 242, 242);


		.header-bar {
			height: 100%;
		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(0, 0, 0);
			}
		}
	}

	.container {
		/deep/.uni-checkbox-input {
			border-radius: 0;
			width: .25rem;
			height: .25rem;

			&:before {
				font-size: .25rem;
			}
		}

		.page-wrap {
			padding-top: .96rem;

			.address-manager {
				.address-manager-edit {
					.ui-list {
						.ui-box {
							display: flex !important;
							justify-content: space-between;
						}

						.ui-list-item {
							height: 1.1rem;
							box-sizing: border-box;
							border-bottom: 1px solid #f6f6f6;
							font-size: .28rem;
							overflow: hidden;
							background: #fff;
							padding: 0.2rem 0.3rem;
							display: box;
							display: -webkit-box;
							box-align: center;
							-webkit-box-align: center;

							.label {
								font-size: .28rem;
							}

							.ui-input {
								border: 0;
								box-flex: 1;
								overflow: hidden;
								font-size: .24rem;
								width: 100%;
								-webkit-box-flex: 1;

								input {
									padding: 0 0.3rem;
									width: 100%;
									-webkit-box-flex: 1;
									box-sizing: border-box;
									font-size: .28rem;
									border: 0;
									text-decoration: none;
									outline: 0;
									vertical-align: middle;
								}
							}
						}
					}
				}
			}
		}

		.add {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 1;
			padding: 0.12rem 0.32rem;

			.btn-gradient {
				display: inline-block;
				height: 0.72rem;
				line-height: .72rem;
				background: linear-gradient(46deg, #ff7d00, #ff5934);
				border-radius: 0.4rem;
				width: 100%;
				font-weight: 700;
				color: #fff;
				font-size: .3rem;
				text-align: center;
				color: #fff;
			}
		}
	}
</style>